<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="platform-standards-page min-h-screen bg-white pb-20">
    <view
      class="sticky top-0 z-10 bg-gradient-to-r from-orange-600 to-orange-400 text-white p-4 flex items-center justify-between"
    >
      <view class="p-1" @click="goBack">
        <ChevronLeft class="w-5 h-5" />
      </view>
      <view class="text-base font-medium">平台探访标准</view>
      <view class="w-5"></view>
    </view>

    <view class="p-4 bg-white">
      <view class="text-lg font-medium text-gray-800 mb-3">上饶百社区探访体系</view>
      <view class="text-sm text-gray-600 leading-relaxed">
        为保证评价的真实性和专业性，上饶百社区建立了严格的探访评价标准体系，通过专业团队实地探访，为用户提供最真实可靠的本地商家信息。
      </view>
    </view>

    <view class="p-4 bg-white border-t-8 border-gray-100">
      <view class="text-lg font-medium text-gray-800 mb-4">探访流程</view>

      <view class="space-y-6">
        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center text-lg font-medium mr-4 flex-shrink-0"
          >
            1
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">商家筛选</view>
            <view class="text-sm text-gray-600 mt-1">从用户推荐和热门搜索中筛选有价值的商家</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center text-lg font-medium mr-4 flex-shrink-0"
          >
            2
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">探访计划</view>
            <view class="text-sm text-gray-600 mt-1">制定探访时间、人员和评价重点</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center text-lg font-medium mr-4 flex-shrink-0"
          >
            3
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">实地探访</view>
            <view class="text-sm text-gray-600 mt-1">探访员以普通顾客身份体验服务全过程</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center text-lg font-medium mr-4 flex-shrink-0"
          >
            4
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">专业评分</view>
            <view class="text-sm text-gray-600 mt-1">根据标准化评分表进行客观评价</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-500 text-white flex items-center justify-center text-lg font-medium mr-4 flex-shrink-0"
          >
            5
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">报告生成</view>
            <view class="text-sm text-gray-600 mt-1">形成探访报告并上传平台展示</view>
          </view>
        </view>
      </view>
    </view>

    <view class="p-4 bg-white border-t-8 border-gray-100">
      <view class="text-lg font-medium text-gray-800 mb-3">探访团队</view>

      <view class="text-sm text-gray-600 leading-relaxed mb-6">
        上饶百社区探访团队由专业餐饮评测师、生活服务体验师和本地资深吃货组成，所有成员均接受系统培训并签署公正评价承诺书。
      </view>

      <view class="grid grid-cols-3 gap-4 mb-6">
        <view class="text-center">
          <view class="text-2xl font-bold text-orange-500">36</view>
          <view class="text-xs text-gray-500 mt-1">专业评测师</view>
        </view>

        <view class="text-center">
          <view class="text-2xl font-bold text-orange-500">120+</view>
          <view class="text-xs text-gray-500 mt-1">月均探访次数</view>
        </view>

        <view class="text-center">
          <view class="text-2xl font-bold text-orange-500">98%</view>
          <view class="text-xs text-gray-500 mt-1">用户认可度</view>
        </view>
      </view>

      <view class="space-y-4">
        <view class="flex p-3 bg-gray-50 rounded-lg">
          <img
            src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
            alt="张评测"
            class="w-16 h-16 rounded-full object-cover"
          />
          <view class="ml-3">
            <view class="text-base font-medium text-gray-800">张评测</view>
            <view class="text-xs text-orange-500 mt-0.5">首席餐饮评测师</view>
            <view class="text-xs text-gray-600 mt-1">
              从业8年，曾任知名美食平台评测总监，擅长中式烹饪评测，对上饶本地菜系有深入研究。
            </view>
          </view>
        </view>

        <view class="flex p-3 bg-gray-50 rounded-lg">
          <img
            src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
            alt="李体验"
            class="w-16 h-16 rounded-full object-cover"
          />
          <view class="ml-3">
            <view class="text-base font-medium text-gray-800">李体验</view>
            <view class="text-xs text-orange-500 mt-0.5">资深服务体验师</view>
            <view class="text-xs text-gray-600 mt-1">
              酒店管理专业毕业，拥有国际服务评测认证，专注于服务细节和用户体验评估。
            </view>
          </view>
        </view>

        <view class="flex p-3 bg-gray-50 rounded-lg">
          <img
            src="http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png"
            alt="王吃货"
            class="w-16 h-16 rounded-full object-cover"
          />
          <view class="ml-3">
            <view class="text-base font-medium text-gray-800">王吃货</view>
            <view class="text-xs text-orange-500 mt-0.5">本地美食达人</view>
            <view class="text-xs text-gray-600 mt-1">
              上饶本地人，美食博主，走遍上饶大街小巷，对本地特色小吃和隐藏美食有独到见解。
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="p-4 bg-white border-t-8 border-gray-100">
      <view class="text-lg font-medium text-gray-800 mb-3">评分标准</view>

      <view class="text-sm text-gray-600 leading-relaxed mb-6">
        我们的评分体系覆盖商家服务的各个环节，采用百分制进行量化评估，确保评价的客观性和可比性。
      </view>

      <view class="text-base font-medium text-gray-800 mb-4">餐饮类评分标准</view>

      <view class="space-y-4">
        <view class="flex items-center">
          <view class="w-24 text-sm text-gray-700">菜品品质</view>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" style="width: 30%"></view>
          </view>
          <view class="w-10 text-sm text-orange-500 font-medium">30%</view>
        </view>
        <view class="text-xs text-gray-500 ml-24">食材新鲜度、烹饪技法、口味和卖相</view>

        <view class="flex items-center">
          <view class="w-24 text-sm text-gray-700">服务质量</view>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" style="width: 25%"></view>
          </view>
          <view class="w-10 text-sm text-orange-500 font-medium">25%</view>
        </view>
        <view class="text-xs text-gray-500 ml-24">服务态度、专业度和响应速度</view>

        <view class="flex items-center">
          <view class="w-24 text-sm text-gray-700">环境卫生</view>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" style="width: 20%"></view>
          </view>
          <view class="w-10 text-sm text-orange-500 font-medium">20%</view>
        </view>
        <view class="text-xs text-gray-500 ml-24">店面整洁度、装修风格和就餐舒适度</view>

        <view class="flex items-center">
          <view class="w-24 text-sm text-gray-700">性价比</view>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" style="width: 15%"></view>
          </view>
          <view class="w-10 text-sm text-orange-500 font-medium">15%</view>
        </view>
        <view class="text-xs text-gray-500 ml-24">价格合理性和整体体验价值感</view>

        <view class="flex items-center">
          <view class="w-24 text-sm text-gray-700">特色创新</view>
          <view class="flex-1 bg-gray-100 rounded-full h-2.5 mx-2">
            <view class="bg-orange-500 h-2.5 rounded-full" style="width: 10%"></view>
          </view>
          <view class="w-10 text-sm text-orange-500 font-medium">10%</view>
        </view>
        <view class="text-xs text-gray-500 ml-24">特色菜品和创新元素</view>
      </view>
    </view>

    <view class="p-4 bg-white border-t-8 border-gray-100">
      <view class="text-lg font-medium text-gray-800 mb-4">探访的价值</view>

      <view class="space-y-5">
        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mr-4 flex-shrink-0"
          >
            <UserCheck class="w-5 h-5" />
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">真实性</view>
            <view class="text-sm text-gray-600 mt-1">以普通消费者身份体验，获取最真实反馈</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mr-4 flex-shrink-0"
          >
            <Award class="w-5 h-5" />
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">专业性</view>
            <view class="text-sm text-gray-600 mt-1">专业评测团队，标准化评分体系</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mr-4 flex-shrink-0"
          >
            <RefreshCw class="w-5 h-5" />
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">动态性</view>
            <view class="text-sm text-gray-600 mt-1">定期回访，确保信息时效性</view>
          </view>
        </view>

        <view class="flex">
          <view
            class="w-10 h-10 rounded-full bg-orange-100 text-orange-500 flex items-center justify-center mr-4 flex-shrink-0"
          >
            <Scale class="w-5 h-5" />
          </view>
          <view>
            <view class="text-base font-medium text-gray-800">公正性</view>
            <view class="text-sm text-gray-600 mt-1">拒绝商业干预，保证评价客观公正</view>
          </view>
        </view>
      </view>
    </view>

    <view class="p-4 bg-white border-t-8 border-gray-100">
      <view class="text-lg font-medium text-gray-800 mb-3">加入探访团队</view>

      <view class="text-sm text-gray-600 leading-relaxed mb-6">
        如果你是美食达人、生活体验师或热爱探店的达人，欢迎加入我们的探访团队！
      </view>

      <view
        class="w-full bg-orange-500 text-white py-3 rounded-full font-medium"
        @click="showJoinModal = true"
      >
        申请加入
      </view>
    </view>

    <view
      v-if="showJoinModal"
      class="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
      @click="showJoinModal = false"
    >
      <view class="bg-white rounded-lg w-full max-w-sm p-4" @click.stop>
        <view class="text-center font-bold text-gray-800 mb-3">申请加入探访团队</view>
        <view class="text-center text-gray-600 mb-4">
          请留下您的联系方式，我们的工作人员将尽快与您联系
        </view>

        <view class="space-y-3 mb-4">
          <view>
            <label class="block text-sm text-gray-700 mb-1">姓名</label>
            <input
              type="text"
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
              placeholder="请输入您的姓名"
            />
          </view>

          <view>
            <label class="block text-sm text-gray-700 mb-1">手机号码</label>
            <input
              type="tel"
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
              placeholder="请输入您的手机号码"
            />
          </view>

          <view>
            <label class="block text-sm text-gray-700 mb-1">申请理由</label>
            <textarea
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm h-20"
              placeholder="请简述您申请加入的理由和相关经验"
            ></textarea>
          </view>
        </view>

        <view class="flex space-x-3">
          <view
            class="flex-1 py-2 border border-gray-300 text-gray-600 rounded-lg"
            @click="showJoinModal = false"
          >
            取消
          </view>
          <view class="flex-1 py-2 bg-orange-500 text-white rounded-lg" @click="submitApplication">
            提交申请
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { ChevronLeft, UserCheck, Award, RefreshCw, Scale } from 'lucide-vue-next'

const showJoinModal = ref(false)

const submitApplication = () => {
  uni.showToast({
    title: '申请已提交，我们将尽快与您联系！',
    icon: 'none',
    mask: false,
  })
}

// Navigation
const goBack = () => {
  console.log('Going back...')
}
</script>

<style scoped></style>
